<style lang="scss">
  @import "~@/styles/base";

  .page-device {
    .device-list {
      padding-top: rpx(80);
      .device {
        position: relative;
        margin-bottom: rpx(15);
        padding: rpx(50) rpx(50) rpx(50) rpx(223);
        background-color: #fff;
        border-radius: rpx(10);
        .icon {
          @include middle-center-y();
          width: rpx(130);
          height: rpx(130);
          left: rpx(45);
        }
        .name {
          font-size: rpx(30);
          line-height: rpx(40);
        }
        .status {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: rpx(15);
          max-width: rpx(100);
          padding: rpx(5) rpx(7);
          border: rpx(1) solid #c8cdd4;
          color: #c8cdd4;
          font-size: rpx(20);
          border-radius: rpx(5);
          img {
            margin-right: rpx(5);
            width: rpx(24);
            height: rpx(24);
          }
          &.active {
            border: rpx(1) solid $main-color;
            color: $main-color;
          }
        }
        .icon-select {
          @include middle-center-y();
          right: rpx(34);
          width: rpx(40);
          height: rpx(40);
        }
        .btn-list {
          @include middle-center-y();
          right: rpx(33);
          .btn-rename, .btn-remove {
            width: rpx(183);
            height: rpx(52);
            line-height: rpx(52);
            font-size: rpx(24);
            color: $light-black;
            border: rpx(1) solid $light-black;
            border-radius: rpx(26);
            text-align: center;
            box-shadow: 0 rpx(3) rpx(9) rgba(177, 187, 198, 0.32);
          }
          .btn-remove {
            margin-top: rpx(15);
            color: #ca6565;
            border-color: #ca6565;
            box-shadow: 0 rpx(3) rpx(9) rgba(207, 98, 98, 0.32);
          }
        }
      }
    }
    .btn {
      @include middle-center-x();
      bottom: rpx(47);
    }
    .btn-edit {
      position: fixed;
      left: 0;
      top: rpx(20);
      width: rpx(166);
      height: rpx(62);
      line-height: rpx(62);
      border: rpx(1) solid $main-color;
      border-top-right-radius: rpx(31);
      border-bottom-right-radius: rpx(31);
      color: $main-color;
      text-align: center;
      font-size: rpx(24);
      box-shadow: 0 rpx(3) rpx(9) rgba(92, 163, 241, 0.32);
      &.active {
        background-color: $main-color;
        color: #fff;
      }
    }
    .edit-dialog-wrap {
      position: fixed;
      left: 0;
      width: 100vw;
      top: 0;
      height: 100vh;
      background-color: rgba(0, 0, 0, .3);
      .edit-dialog {
        @include middle-center();
        width: rpx(620);
        background-color: #fff;
        border-radius: rpx(10);
        .title {
          padding-bottom: rpx(50);
          padding-top: rpx(50);
          text-align: center;
          font-size: rpx(32);
        }
        .name {
          display: block;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: rpx(30);
          width: rpx(500);
          height: rpx(80);
          line-height: rpx(80);
          border: rpx(1) solid $light-black;
          padding: 0 rpx(20);
          font-size: rpx(30);
        }
        .footer {
          display: flex;
          align-items: center;
          border-top: rpx(1) solid $light-black;
          .btn-cancel, .btn-confirm {
            flex: 1;
            text-align: center;
            color: $black;
            font-size: rpx(32);
            height: rpx(100);
            line-height: rpx(100);
          }
          .btn-confirm {
            color: $main-color;
            border-left: rpx(1) solid $light-black;
          }
        }
      }
    }
  }
</style>
<template>
  <div class="page page-device">
    <div class="btn-edit" :class="{active: isEdit}" @click="isEdit = !isEdit;">{{isEdit ? '完成':'编辑设备'}}</div>
    <ul class="device-list">
      <li class="device" @click="changeDevice(device)" v-for="(device,index) in deviceList" :key="index">
        <img class="icon" :src="device.is_online ? '/static/img/device/online_img.png':'/static/img/device/offline_img.png'">
        <div class="name">{{device.dev_alias || device.product_name}}</div>
        <div class="status" :class="{active: device.is_online}">
          <img :src="device.is_online ? '/static/img/device/online.png':'/static/img/device/offline.png'">
          {{device.is_online ? '在线' : '离线'}}
        </div>
        <img class="icon-select" v-if="!isEdit && currentDevice && currentDevice.did === device.did" src="/static/img/device/select.png">
        <div class="btn-list" v-if="isEdit">
          <div class="btn-rename" @click.stop="toRename(device)">重命名</div>
          <div class="btn-remove" @click.stop="remove(device)">删除</div>
        </div>
      </li>
    </ul>
    <button class="btn" @getuserinfo="toAdd" open-type="getUserInfo"><img src="/static/img/common/add.png">添加设备</button>
    <div class="edit-dialog-wrap" v-if="showEdit">
      <div class="edit-dialog">
        <div class="title">设备名称</div>
        <input class="name" v-model="name" placeholder="请输入设备名称"/>
        <div class="footer">
          <div class="btn-cancel" @click="showEdit = false;">取消</div>
          <div class="btn-confirm" @click="rename">确认</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import wx from 'utils/wx'
  export default {
    data() {
      return {
        deviceList: [],
        isEdit: false,
        showEdit: false,
        name: '',
        selectDevice: {},
      };
    },
    computed: {
      currentDevice(){
        return Store.state.device.currentDevice;
      }
    },
    components: {},
    methods: {
      changeDevice(device){
        Store.commit(VUEX.DEVICE.SET_CURRENT_DEVICE, device);
      },
      toRename(device){
        this.selectDevice = device;
        this.name = device.dev_alias || device.product_name;
        this.showEdit = true;
      },
      async rename(){
        if (!this.name) {
          wx.showToast('请输入设备名称')
          return false;
        }
        await wx.request({
          method: 'PUT',
          url: '/app/bindings/' + this.selectDevice.did,
          data: {
            dev_alias: this.name
          },
        })
        wx.showToast('修改成功')
        this.showEdit = false;
        this.deviceList = await Store.dispatch("getDeviceList");
      },
      async remove(device) {
        wx.showModal({
          title: '提示',
          content: '确定删除该设备?',
          showCancel: true,
          success: async result => {
            if (result.confirm) {
              const result = await wx.request({
                method: 'DELETE',
                url: '/app/bindings',
                data: {
                  devices: [ device ],
                  did: device.did,
                },
              })
              if (result.success.length) {
                wx.showToast('设备已删除')
                this.deviceList = await Store.dispatch("getDeviceList");
              }
            }
          }
        })
      },
      toAdd(e) {
        Store.commit(VUEX.USER.SET_WX_USER_INFO, e.mp.detail.userInfo);
        wx.navigateTo({
          url: "/bind/pages/step1/main"
        });
      }
    },
    async onLoad() {
      if (!Store.getters.is_login) {
        await Store.dispatch("login");
      }
      wx.showLoading();
      this.deviceList = await Store.dispatch("getDeviceList");
      wx.hideLoading();
    }
  };
</script>
